{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
  <div class="only_create">
    <div class="row autoContainer">
      <fieldset id="{{nicTabId}}interface_type" class="small-12 large-6 columns">
        <legend style="margin:0px;">{{tr "Interface type"}}</legend>
        <div style="min-height: 40px;">
          <div class="switch left">
            <input class="switch-input" id="{{nicTabId}}_interface_type" type="checkbox">
            <label class="switch-paddle" for="{{nicTabId}}_interface_type">
            </label>
          </div>
          <label class="left">
            &nbsp;&nbsp;
            {{tr "Alias"}}
            {{{tip (tr "The NIC will be attached as an alias")}}}
          </label>
          &nbsp;&nbsp;
          <span id="{{nicTabId}}_no_alias" class="radius warning label">
          <i class="fas fa-exclamation-triangle"/> {{tr "NIC has alias"}}
          </span>
          <select id="{{nicTabId}}_alias_parent" style="width: 200px; margin-left: 5px"></select>
        </div>
        <div id="{{nicTabId}}_alias_external_wrapper" style="min-height: 40px;">
          <div class="switch left">
            <input class="switch-input" id="{{nicTabId}}_alias_external" type="checkbox">
            <label class="switch-paddle" for="{{nicTabId}}_alias_external">
            </label>
          </div>
          <label class="left">
            &nbsp;&nbsp;
            {{tr "Skip network contextualization"}}
            {{{tip (tr "A virtual router can be configured to route SDNAT traffic for this NIC IP address")}}}
          </label>
        </div>
      </fieldset>
      {{#isFeatureEnabled "automatic_selection_vnet"}}
        <fieldset class="small-12 large-6 columns">
          <legend style="margin:0px;">{{tr "Network selection"}}</legend>
          <div class="switch left network_selection">
            <input class="switch-input" id="{{nicTabId}}_network_mode" type="checkbox">
            <label class="switch-paddle" for="{{nicTabId}}_network_mode">
            </label>
          </div>
          <label class="left network_selection">
            &nbsp;&nbsp;
            {{tr "Automatic selection"}}
            {{{tip (tr "The Schedule will decide which is the best virtual network")}}}
          </label>
        </fieldset>
      {{/isFeatureEnabled}}
    </div>
    <div class="row autoContainer">
      <fieldset id="rdp_connection" class="small-12 large-6 columns">
          <legend style="margin:0px;">{{tr "RDP connection"}}</legend>
          <div class="switch left">
            <input class="switch-input" id="{{nicTabId}}_rdp" type="checkbox">
            <label class="switch-paddle" for="{{nicTabId}}_rdp">
            </label>
          </div>
          <label class="left">
            &nbsp;&nbsp;
            {{tr "Activate"}}
            {{{tip (tr "RDP will be activate in this network")}}}
          </label>
      </fieldset>
      <fieldset id="ssh_connection" class="small-12 large-6 columns">
        <legend style="margin:0px;">{{tr "SSH connection"}}</legend>
        <div class="switch left">
          <input class="switch-input" id="{{nicTabId}}_ssh" type="checkbox">
          <label class="switch-paddle" for="{{nicTabId}}_ssh">
          </label>
        </div>
        <label class="left">
          &nbsp;&nbsp;
          {{tr "Activate"}}
          {{{tip (tr "SSH will be enable in this network")}}}
        </label>
      </fieldset>
    </div>
    <div class="auto">
      <fieldset>
        <legend>{{tr "Network Requirements"}}</legend>
        <div class="row">
          <div class="large-12 columns text-center">
            <input type="radio" id="vnet_req" name="{{nicTabId}}_req_select" value="vnet_select">
            <label for="vnet_req">{{tr "Select Vnets "}}</label>
            <input type="radio" id="custom_req"  name="{{nicTabId}}_req_select" value="custom" checked>
            <label for="custom_req">{{tr "Custom expression "}}</label>
          </div>
        </div>
        <br>
        <div id="{{nicTabId}}_vnetTable" class="net_select" hidden>{{{vnetsTableAutoSelectHTML}}}</div>
        <div class="row">
          <div class="large-12 columns">
            <label for="{{nicTabId}}_SCHED_REQUIREMENTS">
              {{tr "Expression"}}
              {{{tip (tr "Boolean expression that rules out entries from the pool of datastores suitable to run this VM.")}}}
            </label>
            <input type="text" id="{{nicTabId}}_SCHED_REQUIREMENTS" name="requirements" />
          </div>
        </div>
        </fieldset>
      <div class="row autoContainer">
        <fieldset class="nic_rank">
          <legend>{{tr "Network Rank"}}</legend>
          <div class="row">
            <div class="large-12 columns text-center">
              <input type="radio" id="packingRadio" name="{{nicTabId}}_rank_select" value="USED_LEASES">
              <label for="packingRadio">
                {{tr "Packing"}}
                {{{tip (tr "Pack the VMs in the vnet to reduce VM fragmentation")}}}
              </label>
              <input type="radio"  id="stripingRadio" name="{{nicTabId}}_rank_select" value="-USED_LEASES">
              <label for="stripingRadio">
                {{tr "Stripping"}}
                {{{tip (tr "Spread the VMs in the vnets")}}}
              </label>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="large-12 columns">
              <label for="{{nicTabId}}_SCHED_RANK">
                {{tr "Expression"}}
                {{{tip (tr "This field sets which attribute will be used to sort the suitable vnets for this VM")}}}
              </label>
              <input type="text" id="{{nicTabId}}_SCHED_RANK" name="RANK" />
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
  <div class="no_auto">
    {{{vnetsTableSelectHTML}}}
  </div>
  <br>
  <div id="nic_values">
  {{#advancedSection (tr "Advanced options") }}
  <fieldset class="no_auto">
    <legend>{{tr "Choose Network"}}</legend>
    <div class="row">
      <div class="medium-6 columns">
        <label for="NETWORK_ID">
          {{tr "Virtual Network ID"}}
        </label>
        <input type="text" wizard_field="NETWORK_ID" id="NETWORK_ID" name="NETWORK_ID"/>
      </div>
      <div class="medium-6 columns">
        <label for="NETWORK">
          {{tr "Virtual Network name"}}
        </label>
        <input type="text" wizard_field="NETWORK" id="NETWORK" name="NETWORK" />
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="NETWORK_UID">
          {{tr "Virtual Network owner's user ID"}}
        </label>
        <input type="text" wizard_field="NETWORK_UID" id="NETWORK_UID" name="NETWORK_UID"/>
      </div>
      <div class="medium-6 columns">
        <label for="NETWORK_UNAME">
          {{tr "Virtual Network owner's user Name"}}
        </label>
        <input type="text" wizard_field="NETWORK_UNAME" id="NETWORK_UNAME" name="NETWORK_UNAME"/>
      </div>
    </div>
    <div class="row" style="display: none">
      <div class="medium-6 columns">
        <label>
          {{tr "OPEN NEBULA MANAGEMENT"}}
        </label>
        <input type="text" wizard_field="OPENNEBULA_MANAGED" id="OPENNEBULA_MANAGED" name="OPENNEBULA_MANAGED"/>
      </div>
    </div>
  </fieldset>
  <fieldset class="no_auto">
    <legend>{{tr "Override Network Values IPv4"}}</legend>
    <div class="row">
      <div class="medium-6 columns">
        <label for="IP">
          {{tr "IP"}}
        </label>
        <input type="text" wizard_field="IP" id="IP" name="IP" size="3" />
      </div>
      <div class="medium-6 columns">
        <label for="MAC">
          {{tr "MAC"}}
        </label>
        <input type="text" wizard_field="MAC" id="MAC" name="MAC"/>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="NETWORK_MASK">
          {{tr "Network mask"}}
        </label>
        <input type="text" wizard_field="NETWORK_MASK" id="NETWORK_MASK" name="NETWORK_MASK" placeholder="255.255.255.0"/>
      </div>
      <div class="medium-6 columns">
        <label for="NETWORK_ADDRESS">
          {{tr "Network address"}}
        </label>
        <input type="text" wizard_field="NETWORK_ADDRESS" id="NETWORK_ADDRESS" name="NETWORK_ADDRESS" placeholder="192.168.1.0"/>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="GATEWAY">
          {{tr "Gateway"}}
        </label>
        <input type="text" wizard_field="GATEWAY" id="GATEWAY" name="GATEWAY"/>
      </div>
      <div class="medium-6 columns">
        <label for="DNS">
          {{tr "DNS"}}
        </label>
        <input type="text" wizard_field="DNS" id="DNS" name="DNS"/>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="SEARCH_DOMAIN">
          {{tr "Search domain for DNS resolution"}}
        </label>
        <input type="text" wizard_field="SEARCH_DOMAIN" id="SEARCH_DOMAIN" name="SEARCH_DOMAIN"/>
      </div>
      <div class="medium-6 columns">
        <label for="eth_{{nicTabId}}_method">
          {{tr "Method"}}
        </label>
        <select wizard_field="METHOD" name="eth_{{nicTabId}}_method" id="eth_{{nicTabId}}_method">
          <option value="">none (Use default)</option> {{!-- This option is the same than static --}}
          <option value="static">static (Based on context)</option>
          <option value="dhcp">dhcp (DHCPv4)</option>
          <option value="skip">skip (Do not configure IPv4)</option>
        </select>
      </div>
    </div>
  </fieldset>
  <fieldset class="no_auto">
    <legend>{{tr "Override Network Values IPv6"}}</legend>
    <div class="row">
      <div class="medium-6 columns">
        <label for="IP6">
          {{tr "IP"}}
        </label>
        <input type="text" wizard_field="IP6" id="IP6" name="IP6" size="3" />
      </div>
      <div class="medium-6 columns">
        <label for="GATEWAY6">
          {{tr "Gateway"}}
        </label>
        <input type="text" wizard_field="GATEWAY6" id="GATEWAY6" name="GATEWAY6"/>
      </div>
    </div>
    <div class="row">
      <div class="medium-6 columns">
        <label for="eth__{{nicTabId}}_ipv6_method">
          {{tr "IPv6 Method"}}
        </label>
        <select wizard_field="IP6_METHOD" name="eth_{{nicTabId}}_ipv6_method" id="eth_{{nicTabId}}_ipv6_method">
          <option value="">none (Use default)</option> {{!-- This option is the same than static --}}
          <option value="static">static (Based on context)</option>
          <option value="auto">auto (SLAAC)</option>
          <option value="dhcp">dhcp (SLAAC and DHCPv6)</option>
          <option value="disable">disable (Do not use IPv6)</option>
          <option value="skip">skip (Do not configure IPv6)</option>
        </select>
      </div>
    </div>
  </fieldset>
  {{{QoSFields}}}
  <fieldset class="not_firecracker">
    <legend>{{tr "Hardware"}}</legend>
    <div class="row">
      <div class="small-12 columns">
        <label>
          {{tr "Virtual NIC hardware mode"}}
        </label>
        <select class="pci-type-nic">
          <option value="emulated">{{tr "Emulated"}}</option>
          <option value="pci-auto">{{tr "PCI passthrough - Automatic"}}</option>
          <option value="pci-manual">{{tr "PCI passthrough - Manual"}}</option>
        </select>
      </div>
    </div>
    <div class="row nic-model-row">
      <div class="medium-6 columns not_lxc">
        <label for="MODEL">
          {{tr "Hardware model to emulate"}}
        </label>
        <input type="text" wizard_field="MODEL" id="MODEL" name="MODEL" />
      </div>
      <div class="medium-6 columns">
        <label for="VIRTIO_QUEUES">
          {{tr "Transmission queue"}}
          {{{tip (tr "Only supported for virtio driver.")}}}
        </label>
        <input type="number" min="0" wizard_field="VIRTIO_QUEUES" id="VIRTIO_QUEUES" name="VIRTIO_QUEUES" />
      </div>
    </div>
    <div class="row pci-row">
      <div class="small-12 columns">
        <table>
          <thead>
            <tr>
              <th style="width:50%">{{tr "Device name"}}</th>
              <th>{{tr "Vendor"}}</th>
              <th>{{tr "Device"}}</th>
              <th>{{tr "Class"}}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row pci-manual-row">
      <div class="medium-6 columns not_lxc">
        <label for="SHORT_ADDRESS">
          {{tr "Short address"}}
        </label>
        <input type="text" wizard_field="SHORT_ADDRESS" id="SHORT_ADDRESS" name="SHORT_ADDRESS" />
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>{{tr "Security Groups"}}</legend>
    <div name="str_nic_tab_id" str_nic_tab_id="{{nicTabId}}">
      {{{secgroupsTableSelectHTML}}}<br>
      <span class="radius warning label">
        <i class="fas fa-exclamation-triangle"/> {{tr "Security Groups belonging to the selected Virtual Network will be applied and cannot be unselected"}}
      </span>
    </div>
  </fieldset>
  <fieldset class="not_firecracker">
    <legend>{{tr "Guest Options"}}</legend>
    <div class="row nic-model-row">
      <div class="medium-6 columns">
        <label for="GUEST_MTU">
          {{tr "Guest MTU"}}
        </label>
        <input type="text" wizard_field="GUEST_MTU" id="GUEST_MTU" name="GUEST_MTU" />
      </div>
    </div>
  </fieldset>
  {{! Hidden inputs for white/black ports and icmp drop. These inputs are
          deprecated, but keeping them hidden allows to preserve the values for
          previous templates in the update wizard. }}
  <div style="display: none;">
    <fieldset>
      <legend>TCP Firewall</legend>
      <div class="row">
        <div class="large-12 columns text-center">
          <input type="radio" class="tcp_type" name="tcp_type" id="{{nicTabId}}white_tcp_type" value="WHITE_PORTS_TCP">
          <label for="{{nicTabId}}white_tcp_type">Whitelist</label>
          <input type="radio" class="tcp_type" name="tcp_type" id="{{nicTabId}}black_tcp_type" value="BLACK_PORTS_TCP">
          <label for="{{nicTabId}}black_tcp_type">Blacklist</label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label for="TCP_PORTS">
            PORTS
          </label>
          <input type="text" id="TCP_PORTS" name="ports" />
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>UDP Firewall</legend>
      <div class="row">
        <div class="large-12 columns text-center">
          <input type="radio" class="udp_type" name="udp_type" id="{{nicTabId}}white_udp_type" value="WHITE_PORTS_UDP">
          <label for="{{nicTabId}}white_udp_type">Whitelist</label>
          <input type="radio" class="udp_type" name="udp_type" id="{{nicTabId}}black_udp_type" value="BLACK_PORTS_UDP">
          <label for="{{nicTabId}}black_udp_type">Blacklist</label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label for="UDP_PORTS">
            PORTS
          </label>
          <input type="text" id="UDP_PORTS" name="ports" />
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>ICMP</legend>
      <div class="row">
        <div class="large-12 columns">
          <label>
            <input type="checkbox" name="icmp_type" value="ICMP" id="icmp_type">Drop</label>
        </div>
      </div>
    </fieldset>
  </div>
  {{/advancedSection}}
</div>
